<template>
	<view class="sell_out_details">
		<!--  -->
		<view class="main" v-if="goods_image">
			<view class="title">商品信息</view>
			<view class="goods_info">
				<image :src="goods_image" mode="aspectFill"></image>
				<view class="info">
					<view class="name one-txt-cut">{{goods_name}}</view>
					<view class="num">
						<text class="left">￥{{wyy}}</text>
						<text class="right">{{pay_money}}件</text>
					</view>
					<view class="all_money">
						<view class="left">
							<text>总价：</text>￥{{pay_money}}
						</view>
					</view>
				</view>
			</view>
			<view class="main_text">
				<view class="info">
					<view class="left">盈利</view>
					<view class="right" style="color: #26C281;">￥{{zq_text}}</view>
				</view>
				<view class="info">
					<view class="left">积分</view>
					<view class="right">{{integral_text}}</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="main_info">
			<view class="info" v-if="status">
				<view class="left">状态</view>
				<view class="right" v-if="status==1">{{games==1?'上午仓':'下午仓'}}-预售中</view>
				<view class="right" v-if="status==2">{{games==1?'上午仓':'下午仓'}}-已匹配</view>
				<view class="right" v-if="status==3">{{games==1?'上午仓':'下午仓'}}-支付凭证已上传</view>
				<view class="right" v-if="status==4">{{games==1?'上午仓':'下午仓'}}-已完成-店面审核通过</view>
				<view class="right" v-if="status==5">{{games==1?'上午仓':'下午仓'}}-已拒绝-等待店长审核</view>
				<view class="right" v-if="status==6">{{games==1?'上午仓':'下午仓'}}-已关闭</view>
			</view>
			<view class="info" v-if="createtime">
				<view class="left">上架时间</view>
				<view class="right">{{createtime}}</view>
			</view>
			<view class="info" v-if="rob_time_text">
				<view class="left">被抢时间</view>
				<view class="right">{{rob_time_text}}</view>
			</view>
			<view class="info" v-if="qg_user_name">
				<view class="left">抢购会员</view>
				<view class="right">{{qg_user_name}}({{buy_mobile}})</view>
			</view>
			<view class="info" style="height: 190rpx;" v-if="image">
				<view class="left">付款凭证</view>
				<view class="image" @click="imageBtn">
					<image :src="image" mode="aspectFill"></image>
				</view>
			</view>
			<view class="info" v-if="pya_time">
				<view class="left">提交凭证时间</view>
				<view class="right">{{pya_time}}</view>
			</view>
			<view class="info" v-if="refuse_msg">
				<view class="left">拒绝原因</view>
				<view class="right">{{refuse_msg}}</view>
			</view>
			<view class="info" v-if="bankInfo.bank">
				<view class="left">开户银行</view>
				<view class="right">{{bankInfo.bank}}</view>
			</view>
			<view class="info" v-if="bankInfo.name">
				<view class="left">账户名称</view>
				<view class="right">{{bankInfo.name}}</view>
			</view>
			<view class="info" v-if="bankInfo.number">
				<view class="left">银行账户</view>
				<view class="right">{{bankInfo.number}}</view>
			</view>
		</view>
		<!-- 底部 -->
		<view :style="[paddingStyle]"></view>
		<view class="details_btn" :style="[botStyle]">
			<text class="btn1">收款账户</text>
			<text class="btn1" v-if="status==3" @click="wanNoBtn">拒绝交易</text>
			<text class="btn2" v-if="status==3" @click="wanBtn">完成交易</text>
		</view>
		<!-- 支付信息 -->
		<PayInfo ref="pay_info" :info='bankInfo'></PayInfo>
	</view>
</template>

<script>
	import PayInfo from '@/components/pay_info/pay_info.vue';
	export default {
		components:{
			PayInfo
		},
		data() {
			return {
				bottomHeight:0,
				id:'',
				status:'',
				goods_image:'',
				goods_name:'',
				wyy:'',
				pay_money:"",
				zq_text:'',
				integral_text:'',
				createtime:'',
				buy_mobile:'',
				qg_user_name:'',
				rob_time_text:'',
				pya_time:'',
				image:'',
				refuse_msg:'',
				bankInfo:{
					name:'',
					bank:'',
					number:'',
					zfb_img:'',
					wx_image:'',
				},
			};
		},
		computed:{
			paddingStyle(){
				var height = this.bottomHeight?(this.bottomHeight*2+108+'rpx'):'108rpx'
				return {
					paddingBottom:height
				}
			},
			botStyle(){
				return {
					paddingBottom:this.bottomHeight?this.bottomHeight+'px':'20rpx'
				}
			},
		},
		onLoad(opt) {
			this.id=opt.id
			uni.getSystemInfo({
				success: (res) => {
					this.bottomHeight = res.safeAreaInsets.bottom
				}
			});
			this.orderDetails()
		},
		methods:{
			orderDetails(){
				var that = this
				that.$tips.showLoading('加载中')
				var params = {
					order_id:that.id,
					source:'sell',
				}
				that.$httpApi.purOrderInfo(params).then((res)=>{
					that.$tips.hideLoading()
					if(res.code==1){
						that.games=res.data.games
						that.status=res.data.status
						that.goods_image=res.data.goods_image
						that.goods_name=res.data.goods_name
						that.wyy=res.data.wyy
						that.pay_money=res.data.pay_money
						that.zq_text=res.data.zq_text
						that.integral_text=res.data.integral_text
						that.createtime=res.data.createtime||''
						that.qg_user_name=res.data.qg_user_name
						that.buy_mobile=res.data.buy_mobile
						that.rob_time_text=res.data.rob_time_text||''
						that.pya_time=res.data.pya_time||''
						that.image=res.data.image||''
						that.refuse_msg=res.data.refuse_msg||''
						this.bankInfo.name=res.data.payee
						this.bankInfo.bank=res.data.opening_bank
						this.bankInfo.number=res.data.card_number
						this.bankInfo.zfb_img=res.data.zfb_img||''
						this.bankInfo.wx_image=res.data.wx_image||''
					}
				})
			},
			// 预览图片
			imageBtn(){
				var arr = []
				arr.push(this.image)
				uni.previewImage({
					current:0,
					urls: arr,
				})
			},
			// 拒绝交易
			wanNoBtn(){
				var that = this
				that.$tips.showLoading('拒绝中')
				var params = {
					order_id:that.id,
				}
				that.$httpApi.orderNo(params).then((res)=>{
					that.$tips.hideLoading()
					if(res.code==1){
						that.$tips.showToast('拒绝成功')
						that.orderDetails()
					}
				})
			},
			// 完成交易
			wanBtn(){
				var that = this
				that.$tips.showLoading('确认中')
				var params = {
					order_id:that.id,
				}
				that.$httpApi.goodsOrderOk(params).then((res)=>{
					that.$tips.hideLoading()
					if(res.code==1){
						that.$tips.showToast('交易完成')
						that.orderDetails()
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.sell_out_details{
		width:100%;
		padding-top: 24rpx;
		.main{
			width: 100%;
			padding: 25rpx 32rpx;
			background: #fff;
			.title{
				width: 100%;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
			}
			.goods_info{
				width: 100%;
				padding: 24rpx 0;
				margin-top: 24rpx;
				border-top: 1rpx solid #F3F3F3;
				border-bottom: 1rpx solid #F3F3F3;
				display: flex;
				image{
					display: block;
					width: 168rpx;
					height: 168rpx;
					border-radius: 10rpx;
				}
				.info{
					width: calc(100% - 168rpx);
					padding-left: 20rpx;
					height: 168rpx;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					.name{
						width: 100%;
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
					}
					.num{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #222222;
						}
						.right{
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
					.all_money{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							font-size: 32rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: 500;
							color: #FF6230;
							text{
								font-size: 28rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #222222;
							}
						}
						.right{
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
				}
			}
			.main_text{
				width: 100%;
				margin-top: 8px;
				.info{
					width: 100%;
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
					.right{
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #222222;
					}
				}
			}
		}
		.main_info{
			width: 100%;
			margin-top: 24rpx;
			padding: 20rpx 32rpx;
			background: #fff;
			.info{
				width: 100%;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
				.right{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
				}
				.image{
					width: 148rpx;
					height: 148rpx;
					image{
						display: block;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.details_btn{
			position: fixed;
			bottom: 0;
			z-index: 9;
			width: 100%;
			background: #fff;
			padding-top: 20rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;
			display: flex;
			justify-content: flex-end;
			text{
				margin-left: 12rpx;
				display: block;
				padding: 0 20rpx;
				height: 68rpx;
				line-height: 64rpx;
				border-radius: 34rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
			}
			.btn1{
				color: #999;
				border: 2rpx solid #EBEBEB;
			}
			.btn2{
				color: #26C281;
				border: 2rpx solid #26C281;
			}
		}
	}
</style>
